<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-image: url(../src/img/time.jpg);
				height:400px ;
				width:400px;
				justify-content: center;
				align-items: center;
				display: flex;
			}
			#tim{
				font-size: 50px;
			}
			
			
		</style>
		<script type="text/javascript">
			function show(){
				let current = new Date();//初始化一个日期
				let hours = format(current.getHours())
				let minutes = format(current.getMinutes())
				let seconds = format(current.getSeconds())
				let str = `${hours}:${minutes}:${seconds}`
				document.getElementById("tim").innerHTML = str
			}
			function format(num){
				if(num<10){
					num="0"+num
				}
				return num
			}
		</script>
	</head>
	<body>
		<div id="img">
			<div  id="tim"></div>
		</div>
			<script type="text/javascript">
				setInterval(show,1000)
				const time =document.querySelector("div")
				function fun(){
					let r = Math.floor(Math.random()*256)
					let g = Math.floor(Math.random()*256)
					let b = Math.floor(Math.random()*256)
					let color = `rgb(${r},${g},${b})`
					return color;
				}
				function fun1(){
					time.style.color=fun();
				}
				fun1();
				setInterval(fun1,500)
			</script>
	</body>
</html>
